//     今日检验进度看板
import type { ColumnsType } from 'antd/lib/table';
import todayBillboard from './index.module.scss'
import { Layout } from 'antd';
import React from 'react';
import { FundProjectionScreenOutlined, ArrowLeftOutlined, DiffOutlined, FileDoneOutlined, FileSyncOutlined } from '@ant-design/icons'
import { Col, Row, Button, Table } from 'antd';
import { Column, Pie } from '@ant-design/plots';
import "@ant-design/flowchart/dist/index.css";
import './index.scss'
import { useNavigate } from 'react-router-dom';
import Zooks from '../qualityBillboard/hook';
import {useState,useEffect}from 'react';
import axios from'../../../../utils/axios'
//统计图
const DemoColumn= () => {
  const [data,setData] = useState([]) 
  useEffect(()=>{
   axios({
      method: 'get',
      url: '/examine/pcCountByMaterialNoCheck ',
      params: {
      }
    })
      .then(function (res) {
        console.log('请求数据成功')
        console.log(res.data.data);
        setData(res.data.data);
    
      }).catch(function (error) {''
        console.log('请求数据失败')
        console.log(error);
        });
  },[]
  )
  
  const config = {
    padding:[40,40,80,40],
    data,
    xField: 'mName',
    yField: 'number',
    label: {
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
        style: {
          fill: '#ffffff',
          opacity: 1,
        },
      },
    },
   
    yAxis:{
      label:{
       style: {
         fill: '#ffffff',
         opacity: 1,
      },
     }
 }
  };
  return <Column  {...config} />;
};
const DemoColumnt= () => {
  const [data,setData] = useState([]) 
  useEffect(()=>{
    axios({
      method: 'get',
      url: '/examine/pcCountByMaterialChecking ',
      params: {
      }
    })
      .then(function (res) {
        console.log('请求数据成功')
        console.log(res.data.data);
        setData(res.data.data);
    
      }).catch(function (error) {''
        console.log('请求数据失败')
        console.log(error);
        });
  },[])
  const config = {
    padding:[40,40,80,40],
    data,
    xField: 'mName',
    yField: 'number',
    label: {
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
        style: {
          fill: '#ffffff',
          opacity: 1,
        },
      },
    },
   
    yAxis:{
      label:{
       style: {
         fill: '#ffffff',
         opacity: 1,
      },
     }
 }
  };
  return <Column  {...config} />;
};
//饼图
const DemoPie = () => {
  const data = [
    {
      type: '分类一',
      value: 27,
    },
    {
      type: '分类二',
      value: 25,
    },
    {
      type: '分类三',
      value: 18,
    },
    {
      type: '分类四',
      value: 15,
    },
    {
      type: '分类五',
      value: 10,
    },
    {
      type: '其他',
      value: 5,
    },
  ];
  const config = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    innerRadius: 0.6,
    label: {
      type: 'inner',
      offset: '-50%',
      content: '{value}',
      style: {
        textAlign: 'center',
        fontSize: 14,
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        },
        content: 'AntVnG2Plot',
      },
    },
  };
  return <Pie {...config} />;
};

const style: React.CSSProperties = { background: '#21294B', };

//表格接口
interface DataType {
  key: string;
  materialsCode: number;
  materialsName: string;
  mcNum: number;
  supName:string;
  pcId:number;
  mcUseTime:string;
  mcUserId:string;
  }
//表格表头
const columns: ColumnsType<DataType> = [
  {
    title: '物料代码',
    dataIndex: 'materialsCode',
    key: 'materialsCode',
    // render: text => <a>{text}</a>,
    // width: '90px',
    align: "center",

  },
  {
    title: '物料名称',
    dataIndex: 'materialsName',
    key: 'materialsName',
    align: "center",

  },
  {
    title: '数量',
    dataIndex: 'mcNum',
    key: 'mcNum',
    align: "center",

  },
  {
    title: '厂家简称',
    dataIndex: 'supName',
    key: 'supName',
    align: "center",

  },
  {
    title: '批次',
    dataIndex: 'pcId',
    key: 'pcId',
    align: "center",

  },
  {
    title: '预使用时间',
    dataIndex: 'mcUseTime',
    key: 'mcUseTime',
    align: "center",

  },
  {
    title: '检验员',
    dataIndex: 'mcUserId',
    key: 'mcUserId',
    align: "center",

  },


];

const { Header, Content } = Layout;



//页面
const TodayBillboard: React.FC = () => {
  
   //首页数据
 const[homeresult,setHomeresult] =useState<any>({});
 const getHomeresult=()=>{
  axios({
    method: 'get',
    url: '/examine/IntegratedQueryCount',
    params: {
    }
  })
    .then(function (res) {
      console.log('请求首页数据成功')
      console.log(res.data.data);
      setHomeresult(res.data.data)
  
    }).catch(function (error) {''
      console.log('请求数据失败')
      console.log(error);
      });
 }
  //待检物料清单
  const [wait,setWait]=useState([]);
  const getWaiting=()=>{
  axios({
    method: 'get',
    url: '/examine/IntegratedQueryNoCheck',
    params: {
    }
  })
    .then(function (res) {
      console.log('请求待检物料数据成功')
    
    //改变时间
    res.data.data.forEach((item: DataType,index:  number) => {
      item.mcUseTime=res.data.data[index].mcUseTime.split('T')[0]
    });
    console.log(res.data.data);
     setWait(res.data.data);
    }).catch(function (error) {''
      console.log('请求数据失败')
      console.log(error);
      });
 }
  //检验中物料清单
  const [intest,setIntest]=useState([]);
  const getIntset=()=>{
    axios({
      method: 'get',
      url: '/examine/IntegratedQueryChecking',
      params: {
      }
    })
      .then(function (res) {
        console.log('请求检验中物料数据成功')
       res.data.data.forEach((item: DataType,index:  number) => {
        item.mcUseTime=res.data.data[index].mcUseTime.split('T')[0]
      });
      console.log(res.data.data);
      setIntest(res.data.data)
      }).catch(function (error) {''
        console.log('请求数据失败')
        console.log(error);
        });
  }
  //检验结果清单
  const [result,setResult]=useState([]);
  const getResult=()=>{
    axios({
      method: 'get',
      url: '/examine/IntegratedQueryChecked',
      params: {
      }
    })
      .then(function (res) {
        console.log('请求检验结果数据成功')
       res.data.data.forEach((item: DataType,index:  number) => {
        item.mcUseTime=res.data.data[index].mcUseTime.split('T')[0]
      });
      console.log(res.data.data);
      setResult(res.data.data)
      }).catch(function (error) {''
        console.log('请求数据失败')
        console.log(error);
        });
  }
 //请求数据
  useEffect(()=>{
    getHomeresult();
    getWaiting();
    getIntset();
    getResult();
    
  },[])


   //路由跳转
   const navigate = useNavigate()
   const backHome=()=>{
   navigate('/home/first/homepage')
  }
 //全屏功能
 const [isqp ,setLisqp]=useState(true)
 const [qp,setQp]=useState('全屏')

 const fullScreen=()=>{
  var de = document.documentElement;
     if (isqp) {
          setQp('退出')
         setLisqp(false);
         de.requestFullscreen();
   }else{
     setLisqp(true);
     setQp('全屏')
     document.exitFullscreen();
   }
  }   

  return <>
    <Layout className='latoutstyle'>
      <Header className={todayBillboard.headerstyle}>
        <Row>
          <Col span={8}  className={todayBillboard.logoclass}>
            <FundProjectionScreenOutlined /> 
            <Button type="primary" shape="default" icon={<ArrowLeftOutlined />}  className={todayBillboard.btn} onClick={backHome}>返回</Button>
    
          </Col>



          <Col span={8} className={todayBillboard.headclass}> 今日检验进度看板 </Col>
          <Col span={8} className={todayBillboard.timeclass}>
            <Zooks/>
            <Button type="primary" shape="default"  onClick={()=>{
              fullScreen()
            }}>{qp}</Button>

          </Col>
        </Row>
      </Header>

      <Content className={todayBillboard.mainstyle}>
        <Row gutter={16} className={todayBillboard.rowstyle}>
          <Col span={4}>
            <div style={style}>
              <div className={todayBillboard.borderround}>
                <DiffOutlined />
              </div>
              <span> 待检批数{homeresult.noCheck} </span>
            </div>
          </Col>
          <Col span={4}>
            <div style={style}>
              <div className={todayBillboard.borderround1}>
                <DiffOutlined />
              </div>
              <span> 检验中批数{homeresult.checkIng}</span>
            </div>
          </Col>
          <Col span={4}>
            <div style={style}>
              <div className={todayBillboard.borderround2}>
                <FileDoneOutlined />
              </div>
              <span> 合格批数{homeresult.approval}</span>
            </div>
          </Col>
          <Col span={4}>
            <div style={style}>
              <div className={todayBillboard.borderround3}>
                <FileSyncOutlined />
              </div>
              <span> 让步批数{homeresult.yield}</span>
            </div>
          </Col>
          <Col span={4}>
            <div style={style}>
              <div className={todayBillboard.borderround2}>
                <FileSyncOutlined />
              </div>
              <span>退货批数{homeresult.returned}</span>
            </div>
          </Col>
          <Col span={4}>
            <div style={style}>
              <div className={todayBillboard.borderround5}>
                <FileSyncOutlined />
              </div>
              <span> 评审中批数{homeresult.checked}</span>
            </div>
          </Col>
        </Row>

        <Row gutter={16}>

          <Col span={8} className={todayBillboard.colclass}>

            <h4 className={todayBillboard.h3class}>待检物料清单</h4>

            <Table columns={columns} dataSource={wait} pagination={false} bordered={true}  />
            <h4 className={todayBillboard.h4class}>待检物料组批数排行榜</h4>


            <DemoColumn  />

          </Col>

          <Col span={8}>

            <h4 className={todayBillboard.h3class}>检验中物料清单</h4>
            <Table columns={columns} dataSource={intest} pagination={false} bordered={true} />
            <h4 className={todayBillboard.h4class}>检验中物料组批数排行榜</h4>
            <DemoColumnt />
          </Col>

          <Col span={8} >

            <h4 className={todayBillboard.h3class}>检验结果清单</h4>
            <Table columns={columns} dataSource={result} pagination={false} bordered={true} />
            <h4 className={todayBillboard.h4class}>完成检验物料组分布统计</h4>
            <DemoPie />
          </Col>

        </Row>
      </Content>



    </Layout>
  </>;
}

export default TodayBillboard